<template>
	<view class="navbar-wrapper" :style="{
    paddingTop: statusBarHeight,
    paddingRight: rightSafeArea
  }">
		<slot />
	</view>
</template>

<script>
	export default {
		name: 'NavbarWrapper',
		data() {
			return {
				// 像素单位
				pxUnit: 'px',
				// 默认状态栏高度
				statusBarHeight: 'var(--status-bar-height)',
				// 微信小程序右上角的胶囊菜单宽度
				rightSafeArea: 0
			}
		},
		created() {
			const px = this.pxUnit
			// #ifndef H5
			// 获取窗口信息
			const windowInfo = uni.getWindowInfo()
			this.statusBarHeight = windowInfo.statusBarHeight + px
			// #endif

			// #ifdef MP-WEIXIN
			// 获取胶囊左边界坐标
			const {
				left
			} = uni.getMenuButtonBoundingClientRect()
			// 计算胶囊(包括右边距)占据屏幕的总宽度：屏幕宽度-胶囊左边界坐标
			this.rightSafeArea = windowInfo.windowWidth - left + px
			// #endif
		}
	}
</script>

<style scoped>
	.navbar-wrapper {
		/**
     * 元素的宽度和高度包括了内边距（padding）和边框（border），
     * 而不会被它们所占据的空间所影响
     * 子元素继承宽度时,只会继承内容区域的宽度 
    */
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		background-color: deeppink;
	}
</style>